<!--
 * @Description:  删除弹框组件
 * @Author:       zhengxu
 * @Date: 2021-11-05 09:02:35
 * @LastEditors:  zhengxu
 * @LastEditTime: 2021-11-05 10:53:58
-->
<template>
  <a-modal
    title="删除"
    :width="420"
    centered
    class="custom_delete_dialog"
    :visible="visible"
    @ok="onOkClick"
    @cancel="onCancelClick"
  >
    <p>是否确定删除？</p>
  </a-modal>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: Boolean
})

const emit = defineEmits(['update:visible', 'onOk'])
/**
 * 取消按钮回调
 */
function onCancelClick () {
  emit('update:visible', false)
}
/**
 * 确认按钮回调
 */
function onOkClick () {
  emit('onOk', false)
}
</script>

<style>
/** ------------自定义删除弹框样式------------*/
/* 弹框标题 */
.custom_delete_dialog .ant-modal-header {
  padding: 14px 24px;
  text-align: center;
}
.custom_delete_dialog .ant-modal-header .ant-modal-title {
  font-size: 16px;
  font-weight: normal;
}
/* 弹框主体 */
.custom_delete_dialog .ant-modal-body {
  padding: 0;
  text-align: center;
  line-height: 100px;
  height: 100px;
  font-size: 16px;
}
/* 弹框底部 */
.custom_delete_dialog .ant-modal-footer {
  padding-top: 0;
  border-top: none;
}
.custom_delete_dialog .ant-modal-footer > div {
  text-align: center;
}
.custom_delete_dialog .ant-modal-footer .ant-btn {
  width: 100px;
  background: #f2f2f2;
  border: 1px solid #e9e9e9;
  color: #222;
  font-size: 14px;
}
.custom_delete_dialog .ant-modal-footer .ant-btn:hover {
  color: #222;
  background: #ccc;
}
.custom_delete_dialog .ant-modal-footer .ant-btn.ant-btn-primary {
  margin-left: 24px;
  background: #2071f5;
  border: 1px solid #2071f5;
  color: #fff;
}
.custom_delete_dialog .ant-modal-footer .ant-btn.ant-btn-primary[disabled] {
  background: #82aaec;
  border-color: #82aaec;
}
.custom_delete_dialog .ant-modal-footer .ant-btn.ant-btn-primary:hover:enabled {
  color: #fff;
  background: #40a9ff;
  border-color: #40a9ff;
}
</style>
